<template>
    <div style="display: flex;width: 100%;height: 100vh; background-color: black;">
        <!-- 左边 -->
        <div style="width: 50%;background-color: rgb(160, 178, 194); text-align: center;height: 99%;">
            <W网页和代码基础 :代码="代码" :访问路径="访问路径" :组件名="组件名" />
        </div>
        <!-- 右边 -->
        <div style="width: 50%;background-color: rgba(25, 8, 36, 0.521);color: aliceblue; min-height: 100%;">
            <!-- 组件名 -->
            <div style="display:flex ;">
                <h1
                    style="margin-top: 10px;margin-left: 30px;width: 180px;text-align: center;background-color:rgb(240, 20, 31);">
                    {{ 组件名 }}</h1>
                <el-button size="small" style="margin-top: 20px;margin-left: 30px;" @click="组件修改">刷新组件</el-button>
            </div>
            <div style="height: 90%;">
                <!-- 属性 -->
                <el-scrollbar height="100%">
                    <!-- 是否显示 Dialog -->
                    <div :style='样式1'>
                        <h4>是否显示 Dialog : </h4>
                        <spen :style='样式2'>英:v_model,类型:boolean,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.v_model' size='small'>
                        </el-radio-group></div>
                    <!-- Dialog 对话框 Dialog 的标题， 也可通过具名 slot （见下表）传入 -->
                    <div :style='样式1'>
                        <h4>Dialog 对话框 Dialog 的标题， 也可通过具名 slot （见下表）传入 : </h4>
                        <spen :style='样式2'>英:title,类型:string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.title' size='small'>
                            <el-radio label="我是标题">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 对话框的宽度，默认值为 50% -->
                    <div :style='样式1'>
                        <h4>对话框的宽度，默认值为 50% : </h4>
                        <spen :style='样式2'>英:width,类型:string / number,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.width' size='small'>
                            <el-radio label="100px">有例子 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否为全屏 Dialog -->
                    <div :style='样式1'>
                        <h4>是否为全屏 Dialog : </h4>
                        <spen :style='样式2'>英:fullscreen,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.fullscreen' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- dialog CSS 中的 margin-top 值，默认为 15vh -->
                    <div :style='样式1'>
                        <h4>dialog CSS 中的 margin-top 值，默认为 15vh : </h4>
                        <spen :style='样式2'>英:top,类型:string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.top' size='small'>
                            <el-radio label="20px">有例子</el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否需要遮罩层 -->
                    <div :style='样式1'>
                        <h4>是否需要遮罩层 : </h4>
                        <spen :style='样式2'>英:modal,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.modal' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 遮罩的自定义类名 -->
                    <div :style='样式1'>
                        <h4>遮罩的自定义类名 : </h4>
                        <spen :style='样式2'>英:modal_class,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.modal_class'
                            size='small'></el-radio-group></div>
                    <!-- Dialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 true -->
                    <div :style='样式1'>
                        <h4>Dialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 true : </h4>
                        <spen :style='样式2'>英:append_to_body,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.append_to_body'
                            size='small'></el-radio-group></div>
                    <!-- Dialog 挂载到哪个 DOM 元素 将覆盖 append-to-body -->
                    <div :style='样式1'>
                        <h4>Dialog 挂载到哪个 DOM 元素 将覆盖 append-to-body : </h4>
                        <spen :style='样式2'>英:append_to,类型:string,默认:body</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.append_to'
                            size='small'></el-radio-group></div>
                    <!-- 是否在 Dialog 出现时将 body 滚动锁定 -->
                    <div :style='样式1'>
                        <h4>是否在 Dialog 出现时将 body 滚动锁定 : </h4>
                        <spen :style='样式2'>英:lock_scroll,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.lock_scroll' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- Dialog 的自定义类名 -->
                    <div :style='样式1'>
                        <h4>Dialog 的自定义类名 : </h4>
                        <spen :style='样式2'>英:custom_class deprecated,类型:string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.custom_class'
                            size='small'></el-radio-group></div>
                    <!-- dialog 打开的延时时间，单位毫秒 -->
                    <div :style='样式1'>
                        <h4>dialog 打开的延时时间，单位毫秒 : </h4>
                        <spen :style='样式2'>英:open_delay,类型:number,默认:0</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.open_delay' size='small'>
                            <el-radio label=2000>有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- drawer 关闭的延时时间，单位毫秒 -->
                    <div :style='样式1'>
                        <h4>drawer 关闭的延时时间，单位毫秒 : </h4>
                        <spen :style='样式2'>英:close_delay,类型:number,默认:0</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.close_delay' size='small'>
                            <el-radio label=2000>有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否可以通过点击 modal 关闭 Dialog -->
                    <div :style='样式1'>
                        <h4>是否可以通过点击 modal 关闭 Dialog : </h4>
                        <spen :style='样式2'>英:close_on_click_modal,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.close_on_click_modal'
                            size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否可以通过按下 ESC 关闭 Dialog -->
                    <div :style='样式1'>
                        <h4>是否可以通过按下 ESC 关闭 Dialog : </h4>
                        <spen :style='样式2'>英:close_on_press_escape,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.close_on_press_escape'
                            size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否显示关闭按钮 -->
                    <div :style='样式1'>
                        <h4>是否显示关闭按钮 : </h4>
                        <spen :style='样式2'>英:show_close,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.show_close' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候. -->
                    <div :style='样式1'>
                        <h4>关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候. : </h4>
                        <spen :style='样式2'>英:before_close,类型:Function,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.before_close'
                            size='small'>
                            <el-radio label="关闭回调">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 为 Dialog 启用可拖拽功能 -->
                    <div :style='样式1'>
                        <h4>为 Dialog 启用可拖拽功能 : </h4>
                        <spen :style='样式2'>英:draggable,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.draggable' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否让 Dialog 的 header 和 footer 部分居中排列 -->
                    <div :style='样式1'>
                        <h4>是否让 Dialog 的 header 和 footer 部分居中排列 : </h4>
                        <spen :style='样式2'>英:center,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.center' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否水平垂直对齐对话框 -->
                    <div :style='样式1'>
                        <h4>是否水平垂直对齐对话框 : </h4>
                        <spen :style='样式2'>英:align_center,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.align_center'
                            size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 当关闭 Dialog 时，销毁其中的元素 -->
                    <div :style='样式1'>
                        <h4>当关闭 Dialog 时，销毁其中的元素 : </h4>
                        <spen :style='样式2'>英:destroy_on_close,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.destroy_on_close'
                            size='small'></el-radio-group></div>
                    <!-- 自定义关闭图标，默认 Close -->
                    <div :style='样式1'>
                        <h4>自定义关闭图标，默认 Close : </h4>
                        <spen :style='样式2'>英:close_icon,类型:string / Component,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.close_icon'
                            size='small'></el-radio-group></div>
                    <!-- 和原生的 CSS 的 z-index 相同，改变 z 轴的顺序 -->
                    <div :style='样式1'>
                        <h4>和原生的 CSS 的 z-index 相同，改变 z 轴的顺序 : </h4>
                        <spen :style='样式2'>英:z_index,类型:number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.z_index'
                            size='small'></el-radio-group></div>
                    <!-- header 的 aria-level 属性 -->
                    <div :style='样式1'>
                        <h4>header 的 aria-level 属性 : </h4>
                        <spen :style='样式2'>英:header_aria_level,类型:string,默认:2</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.header_aria_level'
                            size='small'></el-radio-group></div>
                    <h2 style="margin-top: 15px;background-color:rgb(63, 45, 45);">-------触发的事件 -----</h2>
                    <!-- Dialog 打开的回调 -->
                    <div :style='样式1'>
                        <h4>Dialog 打开的回调 : </h4>
                        <spen :style='样式2'>英:open,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.open'
                            size='small'>
                            <el-radio label="打开的回调">有例子</el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- Dialog 打开动画结束时的回调 -->
                    <div :style='样式1'>
                        <h4>Dialog 打开动画结束时的回调 : </h4>
                        <spen :style='样式2'>英:opened,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.opened'
                            size='small'>
                            <el-radio label="打开动画结束时的回调">有例子</el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- Dialog 关闭的回调 -->
                    <div :style='样式1'>
                        <h4>Dialog 关闭的回调 : </h4>
                        <spen :style='样式2'>英:close,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.close'
                            size='small'>
                            <el-radio label="关闭的回调">有例子</el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- Dialog 关闭动画结束时的回调 -->
                    <div :style='样式1'>
                        <h4>Dialog 关闭动画结束时的回调 : </h4>
                        <spen :style='样式2'>英:closed,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.closed'
                            size='small'>
                            <el-radio label="关闭动画结束时的回调">有例子</el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 输入焦点聚焦在 Dialog 内容时的回调 -->
                    <div :style='样式1'>
                        <h4>输入焦点聚焦在 Dialog 内容时的回调 : </h4>
                        <spen :style='样式2'>英:open-auto-focus,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.open_auto_focus'
                            size='small'>
                            <el-radio label="输入焦点聚焦在Dialog内容时的回调">有例子</el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 输入焦点从 Dialog 内容失焦时的回调 -->
                    <div :style='样式1'>
                        <h4>输入焦点从 Dialog 内容失焦时的回调 : </h4>
                        <spen :style='样式2'>英:close-auto-focus,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.close_auto_focus'
                            size='small'>
                            <el-radio label="输入焦点从Dialog内容失焦时的回调 ">有例子</el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>

                </el-scrollbar>

            </div>
        </div>

    </div>
</template>
<script setup>
import W网页和代码基础 from "../网页和代码基础.vue"
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage, formItemContextKey, ElMessageBox } from 'element-plus'
import { ref, reactive, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();
const 路由 = proxy.router
const 库 = proxy.lib
const API = proxy.API
const 组件名 = ref('对话框')
const 属性 = ref({
    v_model:'',//是否显示 Dialog
    title:'',//Dialog 对话框 Dialog 的标题， 也可通过具名 slot （见下表）传入
    width:'',//对话框的宽度，默认值为 50%
    fullscreen:'',//是否为全屏 Dialog
    top:'',//dialog CSS 中的 margin-top 值，默认为 15vh
    modal:'',//是否需要遮罩层
    modal_class:'',//遮罩的自定义类名
    append_to_body:'',//Dialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 true
    append_to:'',//Dialog 挂载到哪个 DOM 元素 将覆盖 append-to-body
    lock_scroll:'',//是否在 Dialog 出现时将 body 滚动锁定
    custom_class:'',//Dialog 的自定义类名
    open_delay:'',//dialog 打开的延时时间，单位毫秒
    close_delay:'',//drawer 关闭的延时时间，单位毫秒
    close_on_click_modal:'',//是否可以通过点击 modal 关闭 Dialog
    close_on_press_escape:'',//是否可以通过按下 ESC 关闭 Dialog
    show_close:'',//是否显示关闭按钮
    before_close:'',//关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候.
    draggable:'',//为 Dialog 启用可拖拽功能
    center:'',//是否让 Dialog 的 header 和 footer 部分居中排列
    align_center:'',//是否水平垂直对齐对话框
    destroy_on_close:'',//当关闭 Dialog 时，销毁其中的元素
    close_icon:'',//自定义关闭图标，默认 Close
    z_index:'',//和原生的 CSS 的 z-index 相同，改变 z 轴的顺序
    header_aria_level:'',//header 的 aria-level 属性
    open:'',//Dialog 打开的回调
    opened:'',//Dialog 打开动画结束时的回调
    close:'',//Dialog 关闭的回调
    closed:'',//Dialog 关闭动画结束时的回调
    open_auto_focus:'',//输入焦点聚焦在 Dialog 内容时的回调
    close_auto_focus:'',//输入焦点从 Dialog 内容失焦时的回调
})

const 样式1 = ref('display: flex;margin-top: 10px;margin-left: 10px;font-size: 14px;')
const 样式2 = ref('color:rgb(190, 161, 161);font-size: 10px;margin-left: 10px;')



const 代码 = ref('')
const 访问路径 = ref('http://localhost:3000/#/godialog')

const 组件修改 = async () => {
	访问路径.value = ""
    let 结果 = await API.组件修改(组件名.value, 属性.value, "", "")
    if (结果.err == 'ok') {
        代码.value = 结果.msg
        访问路径.value = 结果.url
        console.log("访问路径", 访问路径.value)
        ElMessage.success("修改成功")
    } else {
        访问路径.value = 结果.url
        ElMessage.error("错误:" + 结果.err)
    }

}

</script>
<style lang="scss"  scoped>h4 {
    background-color: rgb(65, 104, 75);
    text-align: center;
}</style>
